<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日忠告</title>

    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 主色调：深紫蓝色，代表智慧与思考
                        secondary: '#06B6D4', // 辅助色：亮青色，代表清新与启示
                        neutral: '#F8FAFC', // 背景色：极浅灰，提供舒适阅读体验
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'Cambria', 'serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-elevation {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
            }
            .card-hover {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>

    <style>
        /* 页面加载动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.8s ease forwards;
        }

        /* 加载指示器动画 */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .spin-animation {
            animation: spin 1.2s linear infinite;
        }

        /* 文字淡入动画 */
        @keyframes textFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .text-animate {
            animation: textFadeIn 1.2s ease forwards;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-indigo-50 to-cyan-50 min-h-screen font-sans text-gray-800">
<div class="container mx-auto px-4 py-8 md:py-16 max-w-4xl">
    <!-- 页面标题 -->
    <header class="text-center mb-10 md:mb-16 animate-fade-in" style="animation-delay: 0.1s;">
        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-primary text-shadow mb-4">
            <i class="fa fa-heart-o mr-3" aria-hidden="true"></i>每日忠告
        </h1>
        <p class="text-gray-600 text-lg md:text-xl max-w-2xl mx-auto">一句真诚的提醒，伴你度过充实的一天</p>
    </header>

    <!-- 主要内容区 -->
    <main class="mb-16 animate-fade-in" style="animation-delay: 0.3s;">
        <div class="bg-white rounded-2xl card-elevation p-6 md:p-10 card-hover">
            <!-- 加载状态 -->
            <div id="loading" class="flex flex-col justify-center items-center h-64">
                <div class="text-primary/70 text-4xl mb-6">
                    <i class="fa fa-circle-o-notch spin-animation" aria-hidden="true"></i>
                </div>
                <p class="text-gray-500">正在获取今日忠告...</p>
            </div>

            <!-- 错误状态 -->
            <div id="error" class="hidden flex flex-col justify-center items-center h-64">
                <i class="fa fa-exclamation-circle text-amber-500 text-5xl mb-6" aria-hidden="true"></i>
                <p class="text-gray-600 mb-6 text-center max-w-md">获取忠告失败，请检查网络连接后重试</p>
                <button id="retryBtn" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-all flex items-center">
                    <i class="fa fa-refresh mr-2" aria-hidden="true"></i>重新获取
                </button>
            </div>

            <!-- 忠告内容 -->
            <div id="adviceContainer" class="hidden">
                <div class="flex items-start mb-8">
                    <i class="fa fa-quote-left text-primary/20 text-5xl mt-2 mr-4" aria-hidden="true"></i>
                    <p id="adviceText" class="text-xl md:text-2xl text-gray-700 leading-relaxed italic text-animate"></p>
                </div>
                <div class="flex justify-end pt-4 border-t border-gray-100">
                    <button id="refreshBtn" class="text-primary hover:text-primary/80 transition-colors flex items-center group">
                        <span>换一句忠告</span>
                        <i class="fa fa-refresh ml-2 group-hover:rotate-180 transition-transform duration-500" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 日期信息 -->
        <div class="text-center mt-8 text-gray-500 animate-fade-in" style="animation-delay: 0.5s;">
            <p id="currentDate" class="text-lg md:text-xl"></p>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="text-center text-gray-400 text-sm mt-12 animate-fade-in" style="animation-delay: 0.7s;">
        <p>愿这句忠告能为你的一天带来启发与力量</p>
        <p class="mt-2">© <span id="currentYear"></span> 每日自省</p>
    </footer>
</div>

<script>
    // 获取当前日期和年份并显示
    function updateDateInfo() {
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
        document.getElementById('currentYear').textContent = now.getFullYear();
    }

    // 调用API获取忠告
    async function fetchAdvice() {
        // 显示加载状态
        document.getElementById('loading').classList.remove('hidden');
        document.getElementById('error').classList.add('hidden');
        document.getElementById('adviceContainer').classList.add('hidden');

        try {
            // 调用day/one接口
            // 注意：实际部署时可能需要处理跨域问题
            const response = await fetch('http://localhost:6512/day/one');

            if (!response.ok) {
                throw new Error('网络响应不正常');
            }

            // 假设接口返回纯文本
            const advice = await response.text();

            // 显示忠告内容
            document.getElementById('adviceText').textContent = advice;
            document.getElementById('loading').classList.add('hidden');
            document.getElementById('adviceContainer').classList.remove('hidden');
        } catch (error) {
            console.error('获取忠告失败:', error);
            // 显示错误状态
            document.getElementById('loading').classList.add('hidden');
            document.getElementById('error').classList.remove('hidden');
        }
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', () => {
        updateDateInfo();
        fetchAdvice();

        // 绑定刷新按钮事件
        document.getElementById('refreshBtn').addEventListener('click', fetchAdvice);
        document.getElementById('retryBtn').addEventListener('click', fetchAdvice);
    });
</script>
</body>
</html>